<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>响应式</title>
    <meta name="renderer" content="webkit">
    <link rel="stylesheet" href="../static/css/sh.css">
    <script type="text/javascript" src="../static/js/jquery.js"> </script>
    <script type="text/javascript" src="../static/js/sh.js"> </script>
</head>
<body>
<div class="sh container bCCC">
    <h3 class="sh text-center lh45">应式布局1</h3>
    <div class="sh flex computer column4 ch200 tablet column3 mobile column2">
        <div class="sh column">
            <div class="sh item m10 bCCC">1</div>
        </div>
        <div class="sh column">
            <div class="sh item m10 bCCC">1</div>
        </div>
        <div class="sh column">
            <div class="sh item m10 bCCC">1</div>
        </div>
        <div class="sh column">
            <div class="sh item m10 bCCC">1</div>
        </div>
    </div>

    <h3 class="sh text-center lh45">响应式布局2</h3>
    <div class="sh flex">
        <div class="sh computer f2 ch200 tablet f1 mobile f3">
            <div class="sh item m10 bCCC">1</div>
        </div>
        <div class="sh f1 ch200">
            <div class="sh item m10 bCCC">1</div>
        </div>
        <div class="sh f1 ch200">
            <div class="sh item m10 bCCC">1</div>
        </div>
        <div class="sh f1 ch200">
            <div class="sh item m10 bCCC">1</div>
        </div>
    </div>

</div>


</body>
</html>